<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Module Federation 图解</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6', // 蓝色作为主色调，代表信任和技术
            secondary: '#F97316', // 橙色作为辅助色，代表活力
            dark: '#1E293B',
            light: '#F8FAFC',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .node {
        transition: all 0.3s ease;
      }
      .node:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .connection {
        stroke-dasharray: 5,5;
        animation: dash 20s linear infinite;
      }
      @keyframes dash {
        to {
          stroke-dashoffset: 1000;
        }
      }
      .gradient-text {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(to right, #3B82F6, #2563EB);
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-dark">
  <div class="min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" id="navbar">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <i class="fa-solid fa-cubes text-primary text-2xl"></i>
          <h1 class="text-xl font-bold gradient-text">Module Federation</h1>
        </div>
        <div class="hidden md:flex space-x-6">
          <a href="#overview" class="text-gray-700 hover:text-primary transition-colors duration-300">概述</a>
          <a href="#how-it-works" class="text-gray-700 hover:text-primary transition-colors duration-300">工作原理</a>
          <a href="#use-cases" class="text-gray-700 hover:text-primary transition-colors duration-300">应用场景</a>
          <a href="#configuration" class="text-gray-700 hover:text-primary transition-colors duration-300">配置方法</a>
          <a href="#code-example" class="text-gray-700 hover:text-primary transition-colors duration-300">代码示例</a>
        </div>
        <button class="md:hidden text-gray-700" id="menu-toggle">
          <i class="fa-solid fa-bars text-xl"></i>
        </button>
      </div>
      <!-- 移动端菜单 -->
      <div class="md:hidden hidden bg-white absolute w-full shadow-lg" id="mobile-menu">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
          <a href="#overview" class="text-gray-700 hover:text-primary transition-colors duration-300 py-2">概述</a>
          <a href="#how-it-works" class="text-gray-700 hover:text-primary transition-colors duration-300 py-2">工作原理</a>
          <a href="#use-cases" class="text-gray-700 hover:text-primary transition-colors duration-300 py-2">应用场景</a>
          <a href="#configuration" class="text-gray-700 hover:text-primary transition-colors duration-300 py-2">配置方法</a>
          <a href="#code-example" class="text-gray-700 hover:text-primary transition-colors duration-300 py-2">代码示例</a>
        </div>
      </div>
    </nav>

    <!-- 英雄区 -->
    <header class="pt-24 pb-16 bg-gradient-to-br from-primary/10 to-white">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center justify-between gap-10">
          <div class="md:w-1/2 space-y-6">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight">
              Webpack <span class="gradient-text">Module Federation</span>
            </h1>
            <p class="text-gray-600 text-lg md:text-xl">
              在微前端架构中实现模块级别的代码共享与协作，让前端应用开发更高效、更灵活。
            </p>
            <div class="flex flex-wrap gap-4 pt-4">
              <a href="#how-it-works" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center">
                <span>了解原理</span>
                <i class="fa-solid fa-arrow-right ml-2"></i>
              </a>
              <a href="#code-example" class="bg-white hover:bg-gray-50 text-primary border border-primary px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
                <span>查看示例</span>
                <i class="fa-solid fa-code ml-2"></i>
              </a>
            </div>
          </div>
          <div class="md:w-1/2 flex justify-center">
            <div class="relative w-full max-w-md">
              <div class="absolute -top-4 -left-4 w-20 h-20 bg-secondary/20 rounded-full blur-xl"></div>
              <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-primary/20 rounded-full blur-xl"></div>
              <img src="https://picsum.photos/600/400" alt="Webpack Module Federation" class="relative z-10 rounded-xl shadow-2xl">
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow">
      <!-- 概述部分 -->
      <section id="overview" class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <div class="text-center max-w-3xl mx-auto mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">什么是 Module Federation?</h2>
            <p class="text-gray-600 text-lg">
              Module Federation 是 Webpack 5 引入的一项革命性特性，它允许 JavaScript 应用在运行时动态加载和共享代码模块，无需提前打包在一起。
            </p>
          </div>
          
          <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-gray-50 rounded-xl p-6 node">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <i class="fa-solid fa-share-alt text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">模块共享</h3>
              <p class="text-gray-600">
                不同应用间可以共享组件、库或工具函数，避免重复打包，减少应用体积。
              </p>
            </div>
            
            <div class="bg-gray-50 rounded-xl p-6 node">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <i class="fa-solid fa-puzzle-piece text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">微前端架构</h3>
              <p class="text-gray-600">
                支持构建大型应用，将其拆分为独立部署的小型应用，每个应用可独立开发、测试和部署。
              </p>
            </div>
            
            <div class="bg-gray-50 rounded-xl p-6 node">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <i class="fa-solid fa-bolt text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">按需加载</h3>
              <p class="text-gray-600">
                在运行时动态加载所需模块，提高应用加载速度和性能，减少初始加载时间。
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- 工作原理部分 -->
      <section id="how-it-works" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
          <div class="text-center max-w-3xl mx-auto mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">工作原理</h2>
            <p class="text-gray-600 text-lg">
              Module Federation 通过创建一个"联邦"系统，允许应用之间在运行时共享模块，实现松耦合的微前端架构。
            </p>
          </div>
          
          <div class="bg-white rounded-xl shadow-xl p-6 md:p-10 mb-12">
            <div class="relative">
              <!-- 可视化图表 -->
              <svg viewBox="0 0 1000 450" class="w-full h-auto">
                <!-- 背景网格 -->
                <defs>
                  <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f0f0f0" stroke-width="0.5"/>
                  </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#grid)" />
                
                <!-- 主机应用 -->
                <g transform="translate(150, 225)">
                  <rect x="-100" y="-70" width="200" height="140" rx="10" fill="#3B82F6" fill-opacity="0.1" stroke="#3B82F6" stroke-width="2" class="node" />
                  <text x="0" y="-85" text-anchor="middle" font-size="18" font-weight="bold" fill="#1E293B">主机应用 (Host)</text>
                  <text x="0" y="-60" text-anchor="middle" font-size="14" fill="#64748B">http://localhost:3000</text>
                  
                  <!-- 主机内部模块 -->
                  <rect x="-80" y="-40" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="-25" font-size="14" fill="#1E293B">React</text>
                  
                  <rect x="-80" y="-5" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="10" font-size="14" fill="#1E293B">应用逻辑</text>
                  
                  <rect x="-80" y="30" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="55" font-size="14" fill="#1E293B">共享模块</text>
                </g>
                
                <!-- 远程应用1 -->
                <g transform="translate(500, 125)">
                  <rect x="-100" y="-70" width="200" height="140" rx="10" fill="#F97316" fill-opacity="0.1" stroke="#F97316" stroke-width="2" class="node" />
                  <text x="0" y="-85" text-anchor="middle" font-size="18" font-weight="bold" fill="#1E293B">远程应用1 (Remote)</text>
                  <text x="0" y="-60" text-anchor="middle" font-size="14" fill="#64748B">http://localhost:3001</text>
                  
                  <!-- 远程应用1内部模块 -->
                  <rect x="-80" y="-40" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="-25" font-size="14" fill="#1E293B">React</text>
                  
                  <rect x="-80" y="-5" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="10" font-size="14" fill="#1E293B">组件库</text>
                  
                  <rect x="-80" y="30" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="55" font-size="14" fill="#1E293B">暴露: Button</text>
                </g>
                
                <!-- 远程应用2 -->
                <g transform="translate(500, 325)">
                  <rect x="-100" y="-70" width="200" height="140" rx="10" fill="#10B981" fill-opacity="0.1" stroke="#10B981" stroke-width="2" class="node" />
                  <text x="0" y="-85" text-anchor="middle" font-size="18" font-weight="bold" fill="#1E293B">远程应用2 (Remote)</text>
                  <text x="0" y="-60" text-anchor="middle" font-size="14" fill="#64748B">http://localhost:3002</text>
                  
                  <!-- 远程应用2内部模块 -->
                  <rect x="-80" y="-40" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="-25" font-size="14" fill="#1E293B">React</text>
                  
                  <rect x="-80" y="-5" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="10" font-size="14" fill="#1E293B">工具库</text>
                  
                  <rect x="-80" y="30" width="160" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-65" y="55" font-size="14" fill="#1E293B">暴露: utils</text>
                </g>
                
                <!-- 共享模块 -->
                <g transform="translate(850, 225)">
                  <rect x="-80" y="-70" width="160" height="140" rx="10" fill="#8B5CF6" fill-opacity="0.1" stroke="#8B5CF6" stroke-width="2" class="node" />
                  <text x="0" y="-85" text-anchor="middle" font-size="18" font-weight="bold" fill="#1E293B">共享模块</text>
                  <text x="0" y="-60" text-anchor="middle" font-size="14" fill="#64748B">独立部署</text>
                  
                  <!-- 共享模块内部 -->
                  <rect x="-60" y="-40" width="120" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-45" y="-25" font-size="14" fill="#1E293B">UI组件</text>
                  
                  <rect x="-60" y="-5" width="120" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-45" y="10" font-size="14" fill="#1E293B">状态管理</text>
                  
                  <rect x="-60" y="30" width="120" height="30" rx="5" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1" />
                  <text x="-45" y="55" font-size="14" fill="#1E293B">API客户端</text>
                </g>
                
                <!-- 连接线条 -->
                <line x1="250" y1="225" x2="400" y2="125" stroke="#3B82F6" stroke-width="2" class="connection" marker-end="url(#arrowhead-blue)" />
                <text x="325" y="175" text-anchor="middle" font-size="14" fill="#3B82F6">加载 Button 组件</text>
                
                <line x1="250" y1="225" x2="400" y2="325" stroke="#3B82F6" stroke-width="2" class="connection" marker-end="url(#arrowhead-blue)" />
                <text x="325" y="275" text-anchor="middle" font-size="14" fill="#3B82F6">加载 utils 模块</text>
                
                <line x1="600" y1="125" x2="770" y2="225" stroke="#F97316" stroke-width="2" class="connection" marker-end="url(#arrowhead-orange)" />
                <text x="685" y="175" text-anchor="middle" font-size="14" fill="#F97316">共享组件</text>
                
                <line x1="600" y1="325" x2="770" y2="225" stroke="#10B981" stroke-width="2" class="connection" marker-end="url(#arrowhead-green)" />
                <text x="685" y="275" text-anchor="middle" font-size="14" fill="#10B981" stroke-width="0.5">共享工具</text>
                
                <!-- 箭头标记定义 -->
                <defs>
                  <marker id="arrowhead-blue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#3B82F6" />
                  </marker>
                  <marker id="arrowhead-orange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#F97316" />
                  </marker>
                  <marker id="arrowhead-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#10B981" />
                  </marker>
                </defs>
              </svg>
            </div>
          </div>
          
          <div class="grid md:grid-cols-2 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-lg">
              <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa-solid fa-sitemap text-primary mr-2"></i>
                核心概念
              </h3>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa-solid fa-circle-check text-primary mt-1 mr-3"></i>
                  <div>
                    <span class="font-semibold">主机应用 (Host)</span>: 加载和使用远程模块的应用
                  </div>
                </li>
                <li class="flex items-start">
                  <i class="fa-solid fa-circle-check text-primary mt-1 mr-3"></i>
                  <div>
                    <span class="font-semibold">远程应用 (Remote)</span>: 暴露模块供其他应用使用的应用
                  </div>
                </li>
                <li class="flex items-start">
                  <i class="fa-solid fa-circle-check text-primary mt-1 mr-3"></i>
                  <div>
                    <span class="font-semibold">remoteEntry.js</span>: 远程应用的入口文件，包含模块清单
                  </div>
                </li>
                <li class="flex items-start">
                  <i class="fa-solid fa-circle-check text-primary mt-1 mr-3"></i>
                  <div>
                    <span class="font-semibold">共享模块 (Shared Modules)</span>: 被多个应用共享的模块，避免重复加载
                  </div>
                </li>
              </ul>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-lg">
              <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa-solid fa-signal text-primary mr-2"></i>
                工作流程
              </h3>
              <ol class="space-y-3">
                <li class="flex items-start">
                  <span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
                  <div>主机应用启动，加载自身代码</div>
                </li>
                <li class="flex items-start">
                  <span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
                  <div>当需要远程模块时，主机应用从远程应用的 remoteEntry.js 获取模块清单</div>
                </li>
                <li class="flex items-start">
                  <span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
                  <div>主机应用按需加载所需的远程模块</div>
                </li>
                <li class="flex items-start">
                  <span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
                  <div>共享模块在运行时被解析和复用，确保单实例加载</div>
                </li>
                <li class="flex items-start">
                  <span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">5</span>
                  <div>远程模块在主机应用中被渲染和使用，就像本地模块一样</div>
                </li>
              </ol>
            </div>
          </div>
        </div>
      </section>

      <!-- 应用场景部分 -->
      <section id="use-cases" class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <div class="text-center max-w-3xl mx-auto mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">应用场景</h2>
            <p class="text-gray-600 text-lg">
              Module Federation 适用于多种场景，尤其在大型应用和微前端架构中表现出色。
            </p>
          </div>
          
          <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg group">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/600/400?random=1" alt="微前端架构" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-3">微前端架构</h3>
                <p class="text-gray-600">
                  将大型应用拆分为多个独立的小型应用，每个应用负责特定业务功能，通过 Module Federation 实现松耦合集成。
                </p>
              </div>
            </div>
            
            <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg group">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/600/400?random=2" alt="共享组件库" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-3">共享组件库</h3>
                <p class="text-gray-600">
                  创建独立的组件库，多个应用可以共享使用，确保UI一致性并减少重复开发。
                </p>
              </div>
            </div>
            
            <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg group">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/600/400?random=3" alt="渐进式迁移" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-3">渐进式迁移</h3>
                <p class="text-gray-600">
                  逐步将旧应用迁移到新架构，新旧系统可以共存并通过 Module Federation 实现交互。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 配置方法部分 -->
      <section id="configuration" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
          <div class="text-center max-w-3xl mx-auto mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">配置方法</h2>
            <p class="text-gray-600 text-lg">
              配置 Module Federation 需要修改 Webpack 配置文件，下面介绍主要配置选项。
            </p>
          </div>
          
          <div class="bg-white rounded-xl shadow-lg p-6 mb-12">
            <h3 class="text-xl font-bold mb-6">核心配置选项</h3>
            <div class="grid md:grid-cols-2 gap-6">
              <div>
                <h4 class="font-bold text-primary mb-3">主机应用配置</h4>
                <pre class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto"><code>// webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack-plugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 应用名称
      name: 'host',
      
      // 远程应用列表
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
        shared: 'shared@http://localhost:3002/remoteEntry.js',
      },
      
      // 共享模块配置
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.2' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.2' },
      },
    }),
  ],
};</code></pre>
              </div>
              
              <div>
                <h4 class="font-bold text-secondary mb-3">远程应用配置</h4>
                <pre class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto"><code>// webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack-plugin');

module.exports = {
  output: {
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new ModuleFederationPlugin({
      // 应用名称
      name: 'remoteApp',
      
      // 暴露的模块
      exposes: {
        './Button': './src/components/Button',
        './utils': './src/utils',
      },
      
      // 共享模块配置
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.2' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.2' },
      },
    }),
  ],
};</code></pre>
              </div>
            </div>
          </div>
          
          <div class="grid md:grid-cols-3 gap-6">
            <div class="bg-white p-6 rounded-xl shadow-md">
              <h4 class="font-bold text-lg mb-3 flex items-center">
                <i class="fa-solid fa-key text-primary mr-2"></i>
                核心参数
              </h4>
              <ul class="space-y-2">
                <li><span class="font-semibold">name</span>: 应用名称，必须唯一</li>
                <li><span class="font-semibold">filename</span>: 远程入口文件名</li>
                <li><span class="font-semibold">remotes</span>: 远程应用列表</li>
                <li><span class="font-semibold">exposes</span>: 暴露的模块列表</li>
                <li><span class="font-semibold">shared</span>: 共享模块配置</li>
              </ul>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
              <h4 class="font-bold text-lg mb-3 flex items-center">
                <i class="fa-solid fa-sliders text-primary mr-2"></i>
                共享模块配置
              </h4>
              <ul class="space-y-2">
                <li><span class="font-semibold">singleton</span>: 是否只加载一个实例</li>
                <li><span class="font-semibold">strictVersion</span>: 是否严格匹配版本</li>
                <li><span class="font-semibold">requiredVersion</span>: 所需的版本</li>
                <li><span class="font-semibold">eager</span>: 是否立即加载</li>
                <li><span class="font-semibold">version</span>: 版本号</li>
              </ul>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
              <h4 class="font-bold text-lg mb-3 flex items-center">
                <i class="fa-solid fa-lightbulb text-primary mr-2"></i>
                最佳实践
              </h4>
              <ul class="space-y-2">
                <li>使用单例模式共享 React 等框架</li>
                <li>为共享模块指定版本要求</li>
                <li>创建独立的共享模块项目</li>
                <li>使用 CDN 托管共享模块</li>
                <li>定期更新共享模块版本</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- 代码示例部分 -->
      <section id="code-example" class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <div class="text-center max-w-3xl mx-auto mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">代码示例</h2>
            <p class="text-gray-600 text-lg">
              下面是一个简单的示例，展示如何在 React 应用中使用 Module Federation。
            </p>
          </div>
          
          <div class="bg-white rounded-xl shadow-xl p-6 md:p-10 mb-12">
            <h3 class="text-xl font-bold mb-6">完整项目结构</h3>
            <div class="flex flex-col md:flex-row gap-8">
              <div class="md:w-1/3">
                <h4 class="font-bold text-primary mb-3">项目结构</h4>
                <div class="bg-gray-50 p-4 rounded-lg text-sm font-mono">
                  <div class="flex items-center mb-2">
                    <i class="fa-solid fa-folder text-yellow-500 mr-2"></i>
                    <span>module-federation-demo</span>
                  </div>
                  <div class="ml-6 space-y-2">
                    <div class="flex items-center">
                      <i class="fa-solid fa-folder text-yellow-500 mr-2"></i>
                      <span>host-app</span>
                    </div>
                    <div class="flex items-center">
                      <i class="fa-solid fa-folder text-yellow-500 mr-2"></i>
                      <span>remote-app</span>
                    </div>
                    <div class="flex items-center">
                      <i class="fa-solid fa-folder text-yellow-500 mr-2"></i>
                      <span>shared-components</span>
                    </div>
                    <div class="flex items-center">
                      <i class="fa-solid fa-file text-blue-500 mr-2"></i>
                      <span>package.json</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="md:w-2/3">
                <h4 class="font-bold text-secondary mb-3">主机应用使用远程组件</h4>
                <pre class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto"><code>// host-app/src/App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 动态加载远程组件
const RemoteButton = lazy(() => import('remoteApp/Button'));
const SharedHeader = lazy(() => import('shared-components/Header'));

function App() {
  return (
    <Router>
      <div className="container mx-auto p-6">
        <Suspense fallback={<div>加载中...</div>}>
          {/* 使用共享组件 */}
          <SharedHeader />
          
          <main className="mt-8">
            <h1>主机应用</h1>
            <p>这是主机应用的内容，使用了来自远程应用的组件。</p>
            
            <Suspense fallback={<div>加载按钮中...</div>}>
              {/* 使用远程组件 */}
              <RemoteButton />
            </Suspense>
          </main>
        </Suspense>
      </div>
    </Router>
  );
}

export default App;</code></pre>
              </div>
            </div>
          </div>
          
          <div class="grid md:grid-cols-2 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-lg">
              <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa-solid fa-file-code text-primary mr-2"></i>
                远程应用配置
              </h3>
              <pre class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto"><code>// remote-app/webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack-plugin');
const packageJson = require('./package.json');

module.exports = {
  output: {
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
      shared: {
        ...packageJson.dependencies,
        react: {
          singleton: true,
          requiredVersion: packageJson.dependencies.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: packageJson.dependencies['react-dom'],
        },
      },
    }),
  ],
};</code></pre>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-lg">
              <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa-solid fa-file-code text-primary mr-2"></i>
                主机应用配置
              </h3>
              <pre class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto"><code>// host-app/webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack-plugin');
const packageJson = require('./package.json');

module.exports = {
  output: {
    publicPath: 'http://localhost:3000/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
        sharedComponents: 'sharedComponents@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        ...packageJson.dependencies,
        react: {
          singleton: true,
          requiredVersion: packageJson.dependencies.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: packageJson.dependencies['react-dom'],
        },
      },
    }),
  ],
};</code></pre>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
      <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-xl font-bold mb-4 flex items-center">
              <i class="fa-solid fa-cubes text-primary mr-2"></i>
              Module Federation
            </h3>
            <p class="text-gray-400">
              Webpack 5 带来的革命性模块共享技术，让前端架构更灵活、更高效。
            </p>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold mb-4">资源</h4>
            <ul class="space-y-2">
              <li><a href="https://webpack.js.org/concepts/module-federation/" class="text-gray-400 hover:text-white transition-colors duration-300">官方文档</a></li>
              <li><a href="https://www.angulararchitects.io/aktuelles/module-federation-with-react/" class="text-gray-400 hover:text-white transition-colors duration-300">教程</a></li>
              <li><a href="https://github.com/module-federation/module-federation-examples" class="text-gray-400 hover:text-white transition-colors duration-300">示例项目</a></li>
            </ul>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold mb-4">相关技术</h4>
            <ul class="space-y-2">
              <li><a href="https://webpack.js.org/" class="text-gray-400 hover:text-white transition-colors duration-300">Webpack</a></li>
              <li><a href="https://reactjs.org/" class="text-gray-400 hover:text-white transition-colors duration-300">React</a></li>
              <li><a href="https://angular.io/" class="text-gray-400 hover:text-white transition-colors duration-300">Angular</a></li>
              <li><a href="https://vuejs.org/" class="text-gray-400 hover:text-white transition-colors duration-300">Vue</a></li>
            </ul>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold mb-4">联系我们</h4>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                <i class="fa-brands fa-github text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                <i class="fa-brands fa-twitter text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                <i class="fa-brands fa-linkedin text-xl"></i>
              </a>
            </div>
          </div>
        </div>
        
        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
          <p>© 2025 Module Federation 示例 | 由 Webpack 提供支持</p>
        </div>
      </div>
    </footer>
  </div>

  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('py-2');
        navbar.classList.remove('py-3');
        navbar.classList.add('bg-white/95');
        navbar.classList.add('backdrop-blur-sm');
      } else {
        navbar.classList.remove('py-2');
        navbar.classList.add('py-3');
        navbar.classList.remove('bg-white/95');
        navbar.classList.remove('backdrop-blur-sm');
      }
    });
    
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
  </script>
</body>
</html>
  